<template>
	<view class="flex-col page">
		<view class="flex-col group_4">
			<view class="flex-col group_5">
				<view class="flex-col">
					<view class="flex-col section_1">
						<view class="justify-between">
							<view class="flex-row">
								<image :src="imgUrl+'16557826792503103103.png'" class="image_7" />
								<text class="text_1">品类</text>
							</view>
							<view class="flex-row group_9" v-if="(list.length + list1.length)>10">
								<text class="text_2" @tap="toChange">展示更多</text>
								<image :src="imgUrl+'16557826977440824211.png'" class="image_9" />
							</view>
						</view>
						<view class="flex-col group_9">
							<view class="flex-row justify-between u-flex-wrap" style="width: 100%;">
								<view class="flex-row  justify-center u-m-t-30" v-for="(item,i) in list" :key="i"
									:class="[materialTypeId==item.materialTypeId?'text-wrapper':'text-wrapper_1',(i+1)%4==0?'':'u-m-l-10']"
									@click="clickItem(item.materialTypeId)"><text
										class="text_11">{{item.materialTypeName}}</text></view>
							</view>
						</view>

						<view class="flex-col group_9" v-if="isShow">
							<view class="flex-row justify-between u-flex-wrap" style="width: 100%;">
								<view class="flex-row items-center justify-center" v-for="(item,j) in list1" :key="j"
									:class="[materialTypeId==item.materialTypeId?'text-wrapper':'text-wrapper_1',(j+1)%4==0?'':'u-m-l-10']"
									@click="clickItem(item.materialTypeId)"><text
										class="text_11">{{item.materialTypeName}}</text></view>
							</view>
						</view>

					</view>
					<view class="flex-col section_2">
						<view class="flex-row " style="margin-top: -20rpx; ">
							<image :src="imgUrl+'16557826792503103103.png'" class="image_7" />
							<text class="text_12">品牌</text>
						</view>

						<view class=" flex-col list">
							<view class="justify-between list-item" :key="i" v-for="(item, i) in brand">
								<view class="flex-row">
									<image :src="item.brandUrl" class="image_11" />
									<text class="text_13">{{item.brandName}}</text>
								</view>


								<view class="flex-row">
									<view class="cancel" @click="remove(item.brandId)">
										<text class="" style="color: #515151;font-size: 24rpx;">取消</text>
									</view>
									<view class="but-sty"
										@click="go('/pages/consult/addList?i='+i+'&materialTypeId='+materialTypeId+'&brand_id='+item.brandId)">
										<text style="color: #3379FF;font-size: 24rpx;">加入清单</text>
										<view class="point">
											<u-badge :value="isAdd(item.brandId)"></u-badge>
										</view>

									</view>
								</view>

							</view>
						</view>

					</view>
				</view>
				<text class="text_18">新用户前三个咨询商品免费。</text>
			</view>
			<view class="justify-between section_3">
				<view class="flex-col group_22">
					<view class="flex-row">
						<text class="text_19">咨询费:</text>
						<view class="group_24">
							<text class="text_20">￥</text>
							<text class="text_21">{{money}}</text>
						</view>
					</view>
					<text class="text_22">共 {{number}} 件</text>
				</view>
				<view class="flex-col button"><text class="text_23" @click="submit">提交清单</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import _ from "lodash"
	export default {
		components: {},
		data() {
			return {
				isShow: false, //是否展开
				list_fSr7gRRC: [null, null],
				index: 0,
				list: [],
				index1: 0,
				list1: [],
				materialTypeId: 0,
				materialTypeIndex: 0,
				brand: [],
				family: {},
				money: 0,
				number: 0,
				materialTypeName: '',
				coupon_id: 0,
				imgUrl: this.$IMG_URL,
			};
		},
		onLoad(option) {
			if (option.hasOwnProperty('orderid')) {
				uni.setStorageSync('orderid', option.orderid);
			}
		},
		created() {
			// uni.setStorageSync('detailedLists',[]);
			this.getCategory();
		},
		onShow() {
			this.$store.dispatch('checkHouse');
			this.getMoney();
		},
		
		// watch:{
		// 	brand:{
		// 		handler(n,o)
		// 		{
		// 			console.log(n);
		// 		},
		// 		immediate:true
		// 	}
		// },
		methods: {
			// 提交清单
			submit() {
				let list = uni.getStorageSync('detailedLists');
				if (list.length == 0) {
					this.$u.toast('请选择主材后再提交清单');
					return
				} else {
					this.go('/pages/consult/submitlist')
				}

			},
			getMoney() {
				this.$http('lhouse.query').then(r => {
					if (r.code == 200) {
						this.family = r.data.project;
						if (this.family) {
							let number = 0;
							uni.getStorageSync('detailedLists').map(item => {
								console.log(item);
								item.brand.map(it => {
									number += it.list.length;
								})
							})

							this.number = number;
							this.$http('consult.calc', {
								areaId: this.family.district,
								number: number,
								couponsId: this.coupon_id
							}).then(r => {
								if (r.code == 200) {
									this.money = r.data;
									console.log(r);
								}
							});
						}


					} 
				});
			},
			toChange() {
				this.isShow = !this.isShow;
			},
			clickItem(id) {
				this.materialTypeId = id;

				this.getCategory();
			},
			isAdd(brandId) {
				let list = uni.getStorageSync('detailedLists');

				let index = _.findIndex(list, {
					'materialTypeId': "" + this.materialTypeId
				});

				if (index > -1) {

					let i = _.findIndex(list[index].brand, {
						'brandId': "" + brandId
					});
					if (i > -1) {
						return list[index].brand[i].list.length;
					}

				} else {
					return 0;
				}


			},
			remove(brandId) {
				let list = uni.getStorageSync('detailedLists');

				let index = _.findIndex(list, {
					'materialTypeId': "" + this.materialTypeId
				});
				if (index > -1) {
					list[index].brand = _.filter(list[index].brand, item => item.brandId != brandId);
				}


				uni.setStorageSync('detailedLists', list);
				this.getMoney()
				this.$forceUpdate()
			},
			getCategory() {
				this.$http('consult.inquiry', {
					inquiryId: this.materialTypeId
				}).then(r => {
					if (r.code == 200) {
						if (r.data.hasOwnProperty('materialTypes')) {
							this.materialTypeId = r.data.materialTypes[0].materialTypeId;
							uni.setStorageSync('materialTypes', r.data.materialTypes);
							this.list = r.data.materialTypes.splice(0, 10);
							this.list1 = r.data.materialTypes.splice(10, -1);
							console.log(r.data.materialTypes);

						}
						this.brand = r.data.brands;
						uni.setStorageSync('brand', this.brand);

					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.text_11 {
		display: flex;
		height: 100%;
		width: 100%;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text-wrapper_1 {
		flex: 1 1 1 1;
		/* border-radius: 32rpx; */
		width: 140rpx;
		height: 64rpx;
		background: #F6F7F9;
		border-radius: 32rpx;
		opacity: 1;
	}

	.point {
		position: absolute;
		top: -10rpx;
		right: 0;
	}

	.image_7 {
		margin-top: 8px;
		width: 13px;
		height: 8px;
	}

	.list-item {
		padding: 16px 0;
	}

	.text-wrapper {
		color: #1C62F9;
		// padding: 10px;
		width: 140rpx;
		height: 64rpx;
		background: rgba(29, 106, 255, 0.1);
		border-radius: 32rpx;
		opacity: 1;
		border: 1px solid #1C62F9;
	}

	.text-wrapper_2 {
		margin-left: 8px;
		padding: 7px 0 11px;
		flex: 1 1 76px;
		background-color: #f6f7f9;
		border-radius: 16px;
		height: 32px;
	}

	.image_13 {
		display: flex;
		align-self: center;
		border-radius: 12px;
		width: 74px;
		height: 24px;
	}

	.image_11 {
		flex-shrink: 0;
		border-radius: 30px;
		width: 40px;
		height: 40px;
	}

	.text_13 {
		margin-left: 12px;
		margin-top: 9px;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.but-sty {
		display: flex;
		justify-content: center;
		align-items: center;
		align-self: center;
		text-align: center;
		width: 145rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 20rpx;
		background-color: #E8F0FF;
		border-radius: 36rpx;
		position: relative;
	}

	.cancel {
		display: flex;
		justify-content: center;
		align-items: center;
		align-self: center;
		text-align: center;
		width: 145rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #F5F6F8;
		border-radius: 36rpx;
	}

	.text_4 {
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 90vh;
	}

	.group_4 {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_5 {
		padding: 10px 12px 24.5px;
	}

	.section_3 {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 8px 12px;
		background-color: #ffffff;
		box-shadow: 0px -0.5px 0px 0px #00000014;
	}

	.text_18 {
		margin-top: 14.5px;
		align-self: flex-start;
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.group_22 {
		margin-bottom: 3px;
	}

	.button {
		background-color: #1d6aff;
		border-radius: 18px;
		width: 110px;
		height: 36px;
	}

	.section_1 {
		padding: 14.5px 11px 16px 12px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.section_2 {
		margin-top: 10px;
		padding: 14.5px 12px 0;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.text_22 {
		align-self: flex-start;
		color: #999999;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.text_23 {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.group_10 {
		margin-top: 21px;
	}

	.list {
		margin-top: 5px;
	}

	.text_19 {
		margin: 4.5px 0 1.5px;
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 13px;
	}

	.group_24 {
		margin-left: 3px;
		height: 19px;
	}

	.group_9 {
		margin: 3px 0 2px;
	}

	.group_12 {
		margin-top: 16px;
	}

	.text_12 {
		height: 100%;
		display: flex;
		align-items: center;
		margin-left: 8px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.list-item:not(:last-of-type) {
		border-bottom: solid 0.5px #eeeeee;
	}

	.text_20 {
		color: #fe641a;
		font-size: 10px;
		font-family: '.AppleSystemUIFont';
		line-height: 11.5px;
	}

	.text_21 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.image_8 {
		flex-shrink: 0;
	}

	.text_1 {
		margin-left: 8px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.text_2 {
		color: #1c4ca8;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.image_9 {
		margin-left: 7.5px;
		margin-top: 7.5px;
		flex-shrink: 0;
		width: 9px;
		height: 5px;
	}

	.view_3 {
		margin-left: 0;
	}

	.text_3 {
		color: #1d6aff;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.text_10 {
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}
</style>
